<template>
  <div id="app">
    <div class="nav">
      <div class="nav_name">咚咚家政</div>
      <div class="nav_tab">
        <ul>
          <router-link
            active-class="active"
            v-for="item in navList"
            :key="item.id"
            :to="item.path"
            tag="li"
          >
            {{ item.name }}
          </router-link>
          <li v-show="!isLogin" @click="dialogVisible = true" class="login">
            登录
          </li>
          <div class="userName" v-show="isLogin">
            <el-dropdown>
              <span> 欢迎，咚咚</span>
              <el-dropdown-menu slot="dropdown">
                <router-link to="/order">
                  <el-dropdown-item>我的订单</el-dropdown-item>
                </router-link>
                <el-dropdown-item @click.native="exitLogin"
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <li @click="openCart">
            <i class="el-icon-shopping-cart-full"></i>
          </li>
        </ul>
      </div>
    </div>
    <router-view />
    <div class="footer">
      <div class="footer_text">咚咚家政</div>
      <div class="footer_tab">
        <ul>
          <li>首页</li>
          <li>家政</li>
          <li>月嫂</li>
          <li>保姆</li>
          <li>关于</li>
        </ul>
      </div>
      <div class="footer_address">
        <div class="type">家政服务商场</div>
        <div class="phone">服务热线：400-****-****</div>
        <div class="detail-address">
          公司地址：陕西省西安市阎良区迎宾大道***号
        </div>
      </div>
    </div>
    <div class="login">
      <el-dialog :visible.sync="dialogVisible" width="40%">
        <div>演示号码：13331313131</div>
        <div>验证码：123456</div>
        <div class="login-form">
          <el-form ref="form" label-width="100px">
            <el-form-item label="手机号">
              <el-input maxlength="11" v-model="phone"></el-input>
            </el-form-item>
            <el-form-item label="验证码">
              <el-input v-model="code"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="startTimeDown">
            {{ countDown ? time : "获取验证码" }}
          </el-button>
          <el-button type="primary" @click="login">登录</el-button>
        </span>
      </el-dialog>
    </div>
    <Cart ref="myCart" :drawer="drawer" @closeCart="closeCart"></Cart>
  </div>
</template>

<script>
import Cart from "./components/Cart";
export default {
  name: "App",
  data() {
    return {
      navList: [
        {
          id: "1",
          name: "首页",
          path: "/home",
        },
        {
          id: "2",
          name: "家政",
          path: "/household",
        },
        {
          id: "3",
          name: "月嫂",
          path: "/monthNanny",
        },
        {
          id: "4",
          name: "保姆",
          path: "/nurse",
        },
        {
          id: "5",
          name: "关于",
          path: "/about",
        },
      ],
      dialogVisible: false,
      countDown: false,
      time: 60,
      phone: "",
      code: "",
      isLogin: false,
      drawer: false,
    };
  },
  components: { Cart },
  methods: {
    //倒计时
    startTimeDown() {
      this.countDown = true;
      setTimeout,setInterval
      let timeId = setInterval(() => {
        if (this.time === 0) {
          clearInterval(timeId);
          this.time = 60;
          this.countDown = false;
        } else {
          this.time -= 1;
        }
      }, 1000);
    },
    // 登录
    login() {
      if (this.phone === "13331313131" && this.code === "123456") {
        this.dialogVisible = false;
        this.isLogin = true;
        localStorage.setItem("isLogin", this.isLogin);
      } else {
      }
    },
    //退出登录
    exitLogin() {
      console.log(111);
      this.isLogin = false;
      localStorage.setItem("isLogin", this.isLogin);
      this.$router.replace("/home");
    },
    // 打开购物车
    openCart() {
      this.drawer = true;
      this.$refs.myCart.getCartItem();
    },
    // 关闭购物车
    closeCart() {
      this.drawer = false;
    },
  },
  created() {
    let isLogin = localStorage.getItem("isLogin");
    if (isLogin === "true") {
      this.isLogin = true;
    } else {
      this.isLogin = false;
    }
  },
};
</script>

<style scoped lang="scss">
body {
  font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";
}
#app {
  background-color: #f4f9fc;
  display: flex;
  flex-direction: column;
  height: 100%;
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    height: 60px;
    background-color: #636262;
    font-size: 20px;
    color: #fff;
    &_name {
      color: #38a578;
      font-weight: bold;
    }
    &_tab {
      ul {
        display: flex;
        line-height: 60px;
        li {
          // margin-right: 40px;
          line-height: 60px;
          width: 80px;
          height: 60px;
          text-align: center;
        }
        .userName {
          color: #38a578;
          font-size: 16px;
          /deep/ .el-dropdown {
            color: #38a578;
          }
        }
        .login {
          color: #fff;
          background-color: #38a578;
        }
        :hover {
          cursor: pointer;
        }
        .active {
          color: #38a578;
        }
      }
    }
  }
  .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #808080;
    color: #fff;
    height: 140px;
    &_text {
      font-size: 20px;
      line-height: 60px;
      font-weight: bold;
    }
    &_tab {
      line-height: 40px;
      ul {
        display: flex;
        li {
          margin-right: 20px;
        }
      }
    }
    &_address {
      display: flex;
      line-height: 40px;
      .phone {
        margin: 0 20px;
      }
    }
  }
  .login {
    text-align: center;
    line-height: 30px;
    font-size: 18px;
    .login-form {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
    }
  }
}
</style>
